<template>
	<!-- 我的团队页面 -->
	<view class="content">
		<view class="status_bar">
		          <!-- 这里是状态栏 -->
		   </view>
		   <view style="height:100rpx;">
		<view class="topnav">
			<view class="topnav_box" style="position: relative;">
				<image src="../../static/leftimg.png" class="leftimg" mode="widthFix" @tap="back()" style="position: absolute;left:0;"></image>
					<view class="dsx" style="width:100%;text-align: center;font-size: 35rpx;">我的团队(1)</view>
				<view  class="loa_hui" style="position: absolute;right:0;">
					<image src="../../static/up.png" class="up_img" mode="widthFix"></image>
					<image src="../../static/down.png" class="down_img" mode="widthFix"></image>
				</view>
			</view>
		</view>
		</view>
		
		<!-- 切换分类 start -->
		<view style="height:80rpx">
		<view class="lei_ul">
			<view :class="[lei_li_active === index ? 'lei_li_active lei_li' : 'lei_li']" v-for="(lei,index) in lei" :key="index" @tap="changelei(index)" >
				<view v-if="index==0">直属(10)</view>
				<view v-else>拓客(0)</view>
			</view>
		</view>
		</view>
		<!-- 切换分类 end -->
		
		<view v-if="pancen">
			<view class="slik">
				<view class="slik_left">
					<view class="bigbtn">大潮人</view>
					<view class="smbtn">小潮人</view>
				</view>
				<view class="slik_right">
					<view class="slik_right_box">
						<input type="number" placeholder="请输入邀请码" class="num_input"/>
						<view class="search">查询</view>
					</view>
				</view>
			</view>
			<view class="list_ul">
				<view class="list_li" v-for="(shop,index) in shop">
					<view class="list_li_left">
						<image :src="shop.src" class="tou" mode="widthFix"></image>
						<view class="list_li_left_sm">
							<view class="list_li_left_sm_tp">
								<image src="../../static/start.png" mode="widthFix" v-show="shop.start"></image>
								{{shop.tel}}
							</view>
							<view class="list_li_left_sm_bt">
								成为潮人时间: {{shop.time}}
							</view>
						</view>
					</view>
					<view class="list_li_right">
						<view class="list_li_right_tp">
							+{{shop.tks}}
						</view>
						<view class="list_li_right_bt">
							{{shop.team}}个成员
						</view>
					</view>
				</view>
			</view>
			<view class="ns_box">
			<view class="ns">
				<view class="ns_left" @tap="jian">
					上一页
				</view>
				<view class="ns_cen">
					<view class="dangye">{{dangye}}</view>/<view class="zongye">{{zongye}}</view>
				</view>
				<view class="ns_left" @tap="jia">
					下一页
				</view>
			</view>
			</view>
			
		</view>
		
		<view class="" v-else>
			<view class="jds">
				<image src="../../static/warm.png" class="warm_img" mode="widthFix"></image>
				<view class="ds">空空如也~</view>
			</view>
		</view>
		
		<!-- 侧边栏 -->
		<fixce></fixce> 
		<!-- 回到顶部start -->
		<view class="top" :style="{'display':(topState===true? 'block':'none')}">
		<image src="../../static/huitop.png" class="huitop"
		@tap="top()">
		</view>
		</image>
			<!-- 回到顶部end-->
	</view>
	</template>	
<script>
	import fixce from '../../component/fixce.vue';  //侧边栏组件
	export default{
		components:{
		fixce
		},
		data(){
			return{
				topState:false,
				lei_li_active:0,
				lei:['直属','拓客'],
				pancen:true,  //为true说明有优惠券，展示有优惠券页面，反之则无
				shop:[
					{
					src:'http://thirdwx.qlogo.cn/mmopen/9kibjKzqKf8H12BxOk7T3UeBIfichjsb0noOibrn3741aZumfU1TvN7bbO7rr81sLguKmb4grCj3vL5hafzECGHmS7YMNDNQp0f/132',
					start:true,
					tel:'139xxxx9476',
					time:'2020-07-28 17:33',
					tks:0,
					team:0
					},
					{
					src:'http://thirdwx.qlogo.cn/mmopen/9kibjKzqKf8H12BxOk7T3UeBIfichjsb0noOibrn3741aZumfU1TvN7bbO7rr81sLguKmb4grCj3vL5hafzECGHmS7YMNDNQp0f/132',
					start:false,
					tel:'139xxxx9476',
					time:'2020-07-28 17:33',
					tks:0,
					team:0
					}
				],
				dangye:1, //当前页
				zongye:9   //总页
			}
		},
		// 回到顶部start
		onPageScroll(e){ //根据距离顶部距离是否显示回到顶部按钮
		    if(e.scrollTop>200){ //当距离大于200时显示回到顶部按钮
		        this.topState = true
		    }else{ //当距离小于200时关闭回到顶部按钮
		        this.topState = false
		    }
		},
		// 回到顶部end
		methods:{
			top() { //回到顶部
			　　　　uni.pageScrollTo({ 
			　　　　　　scrollTop: 0, duration: 300 
			　　　　}); 
			　　},
			back (){
				uni.switchTab({
				    url: '../commission/commission'
				});
			},
			changelei (index){  //切换分类,更新shop的值，值为空则无订单，
				this.lei_li_active=index;
				  //此处应请求数据更新shop
				if(this.shop.length!=0){  
					this.pancen=true; //为true说明有订单，展示有订单页面，反之则无
				}else{
					this.pancen=false; //为true说明有订单，展示有订单页面，反之则无
				}
			},
			jian (){   //减
				this.dangye--;
				if(this.dangye<=1){
					this.dangye=1;
				}
				if(this.dangye>=this.zongye){
					this.dangye=this.zongye;
				}
			},
			jia (){  //加
				this.dangye++;
				if(this.dangye>=this.zongye){
					this.dangye=this.zongye;
				}
			}
		}
	}
</script>
<style>
	.content{
		width:100%;
		height:100vh;
		background: #f3f3f3;
	}
	.lei_ul{
		width:100%;
		display: flex;
		justify-content:center;
		align-items: center;
		background-color: #fff;
		position: fixed;
		top:125rpx;
		z-index: 9999;
	}
	/* #ifdef H5 */
	.lei_ul{
		top:90rpx;
	}
	/* #endif */
	.lei_li{
		width:50%;
		padding:20rpx 0;
		color:#666;
		text-align: center;
		font-size: 28rpx;
	}
	.lei_li_active{
		color: #ff80c0;
		border-bottom:4rpx solid #ff80c0;
	}
	.jds{
		width:100%;
		display: flex;
		flex-wrap:wrap;
		justify-content: center;
		align-items: center;
	}
	.warm_img{
		width:190rpx;
		margin-top:150rpx;
	}
	.ds{
		width:100%;
		color:#666;
		text-align: center;
		margin-top:40rpx;
		font-size:28rpx;
	}
	.slik{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding:20rpx 0;
	width:95%;
	margin:0 auto;
	}
	.slik_left{
		width:40%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left:1%;
	}
	.slik_right{
		width:55%;
		display: flex;
		align-items: flex-start;
		margin-left:-50rpx;
	}
	.bigbtn,.smbtn{
		    border: 2rpx solid #ff80c0;
		    color: #ff80c0;
			padding:6rpx 18rpx;
			border-radius: 10rpx;
			font-size:25rpx;
	}
	.bigbtn{
		margin:0 25rpx 0 0;
	}
	.slik_right_box{
		width:100%;
		display: flex;
		align-items: center;
		justify-content:center;	
	}
	.num_input{
		width:70%;
		height:60rpx;
		text-align: center;
		background-color: #fff;
		border-radius: 10rpx 0 0 10rpx;
		
	}
	.search{
		    height: 60rpx;
		    padding: 0 18rpx;
		    background: #ccc;
		    border-radius: 0 10rpx 10rpx 0;
			white-space: nowrap;
			line-height: 60rpx;
	}
	.list_li{
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
		width:94%;
		padding:25rpx 3%;
		border-bottom: 2rpx solid #ededed;
	}
	.list_li_left{
		width:70%;
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}
	.list_li_left_sm{
		width:80%;
		display: flex;
		flex-wrap:wrap;
		justify-content: flex-start;
		align-items: center;
	}
	.list_li_left_sm_tp{
		width:100%;
		display: flex;
		align-items: center;
		font-size:28rpx;
	}
	.list_li_left_sm_tp image{
		width:35rpx;
		margin-right:10rpx;
	}
	.list_li_left_sm_bt{
		white-space: nowrap;
		color:#666;
		font-size:24rpx;
		margin-top:5rpx;
	}
	.list_li_right{
		width:22%;
		display: flex;
		flex-wrap:wrap;
		justify-content: flex-end;
		align-items: center;
		border-left: 2rpx solid #ededed;
	}
	.list_li_right_tp,.list_li_right_bt{
		width:100%;
		text-align: right;
		font-size:25rpx;
	}
	.tou{
		width:90rpx;
		border-radius: 100rpx;
		margin-right:25rpx;
	}
	.ns_box{
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		bottom:100rpx;
		width:100%;
	}
	.ns{
		margin:0 auto;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.ns_left{
		color:#666;
		border:2rpx solid #ccc;
		padding:8rpx 18rpx;
	}
	.ns_cen{
		border-top:2rpx solid #ccc;
		border-bottom:2rpx solid #ccc;
		padding:8rpx 0;
		width:140rpx;
		justify-content: center;
		white-space: nowrap;
		font-weight: 500;;
		display: flex;
		align-items: center;
	}
	.up_img,.down_img{
		width:50rpx;
	}
	.up_img{
		margin-right:10rpx;
	}
</style>
